<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<text class="nav-title">排队取号</text>
		</view>

		<!-- 关注公众号引导弹窗（使用二维码） -->
		<view class="follow-modal" v-if="showFollowModal">
			<view class="modal-content">
				<text class="modal-title">请先关注公众号</text>
				<text class="modal-desc">扫码关注后即可继续取号流程</text>

				<!-- 公众号二维码图片 -->
				<image src="/static/qrcode_for_gh.jpg" alt="公众号二维码" class="qrcode-img"></image>

				<text class="qrcode-tip">长按图片识别二维码关注</text>
				<button class="confirm-btn" @click="checkFollowStatus">
					已关注，继续
				</button>
			</view>
		</view>

		<!-- 取号界面 -->
		<view class="take-number" v-if="!hasTakenNumber && !showFollowModal">
			<view class="shop-info">
				<image src="../../static/hotel.png" alt="餐厅logo" class="shop-logo"></image>
				<view class="shop-details">
					<text class="shop-name">{{ shopName }}</text>
					<text class="shop-desc">人气餐厅 · 美味佳肴</text>
				</view>
			</view>

			<view class="people-selector">
				<text class="selector-title">请选择用餐人数：</text>
				<view class="people-options">
					<button class="people-btn" :class="{ 'people-btn-active': selectedPeople === num }"
						v-for="num in [1, 2, 3, 4, 5, 6]" :key="num" @click="selectPeople(num)">
						{{ num }}人
					</button>
				</view>
				<button class="people-btn more-btn" @click="selectPeople('7')"
					:class="{ 'people-btn-active': selectedPeople === '7' }">
					6人以上
				</button>
			</view>

			<view class="phone-input" v-if="needPhoneInput">
				<input type="number" placeholder="请输入手机号码" v-model="phoneNumber" maxlength="11"
					class="phone-input-field" />
			</view>

			<!-- 在phone-input下方添加 -->
			<!-- <view class="auth-tip" v-if="isWechat && !userId">
				<text>微信用户可点击下方按钮快捷授权</text>
				<button class="auth-btn" @click="redirectToWechatAuth">
					微信快捷授权
				</button>
			</view> -->

			<button class="take-number-btn" @click="takeNumber" :disabled="!canTakeNumber">
				取号
			</button>
		</view>

		<!-- 排队状态界面 -->
		<view class="queue-status" v-if="hasTakenNumber && !showFollowModal">
			<view class="status-header">
				<text class="status-text">{{ statusText }}</text>
				<image :src="userImage" alt="排队中图标" class="status-icon" v-if="queueStatus === 0 || queueStatus === 1">
				</image>
			</view>

			<view class="queue-details">
				<view class="queue-item">
					<text class="queue-label">您的号码</text>
					<text class="queue-value">{{ queueNumber }}</text>
				</view>
				<!-- 当queueStatus不是5时才显示前方等待行 -->
				<view class="queue-item" v-if="queueStatus !== 5">
					<text class="queue-label">前方等待</text>
					<text class="queue-value">{{ peopleAhead }}桌</text>
				</view>
				<view class="queue-item">
					<text class="queue-label">取号时间</text>
					<text class="queue-value">{{ formatTime(queueTime) }}</text>
				</view>
			</view>

			<view class="shop-name-large">{{ shopName }}</view>

			<view class="action-buttons">
				<button class="action-btn cancel-btn" @click="cancelQueue"
					:disabled="queueStatus !== 0 && queueStatus !== 1 && queueStatus !==5">
					取消排队
				</button>
				<button class="action-btn refresh-btn" @click="refreshStatus"
					:disabled="queueStatus !== 0 && queueStatus !== 1 && queueStatus !==5">
					<i class="fa fa-refresh"></i> 刷新状态
				</button>
			</view>

			<view class="queue-tips" v-if="queueStatus === 0 || queueStatus === 1">
				<text>温馨提示：请留意叫号，过号需重新排队</text>
			</view>

			<view class="queue-result" v-if="queueStatus === 3">
				<text class="result-text">您的号码已超时</text>
			</view>
		</view>

		<!-- 底部信息 -->
		<view class="footer">
			<text class="footer-text">如有疑问，请联系店员</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			//console.log('进入data()函数，初始化数据');
			return {
				// 店铺信息
				shopName: "",
				shopId: "",
				isShopInfoValid: true,

				// 取号相关
				hasTakenNumber: false,
				selectedTableType: null,
				selectedPeople: null,
				phoneNumber: "",
				userId: "",
				userName: "",
				userImage: "",
				needPhoneInput: true,

				// 排队状态相关
				queueId: null,
				queueNumber: null,
				queueStatus: 0, // 0排队中1叫号中2已取消3已超时5留号中
				peopleAhead: 0,
				queueTime: null,
				isWechat: false,
				code: null,
				authFailed: false, // 新增：标记授权失败状态

				// 桌型选项
				tableTypes: [{
						label: "小桌",
						value: "A"
					},
					{
						label: "中桌",
						value: "B"
					},
					{
						label: "大桌",
						value: "C"
					}
				],

				// 基础配置
				appId: 'wxc06d9725ce3431a2',

				// 新增关注相关变量
				showFollowModal: false,
				checkFollowInterval: null,
				refreshInterval: null
			};
		},
		computed: {
			canTakeNumber() {
				//console.log('进入canTakeNumber计算属性，检查是否可以取号');
				const result = this.selectedPeople &&
					(!this.needPhoneInput || (this.phoneNumber && this.phoneNumber.length === 11));
				//console.log(`canTakeNumber计算结果: ${result}`);
				return result;
			},
			statusText() {
				//console.log('进入statusText计算属性，获取排队状态文本');
				let text;
				switch (this.queueStatus) {
					case 0:
						text = "正在排队中";
						break;
					case 1:
						text = "正在叫号中";
						break;
					case 2:
						text = "已取消排队";
						break;
					case 3:
						text = "号码已超时";
						break;
					case 5:
						text = "留号中";
						break;
					default:
						text = "排队中";
				}
				//console.log(`queueStatus: ${this.queueStatus}, statusText: ${text}`);
				return text;
			}
		},
		onLoad() {
			//console.log('进入onLoad生命周期函数，页面开始加载');
			// 从URL参数获取店铺信息
			//console.log('开始从URL参数获取店铺信息');
			this.getShopInfoFromUrl();

			// 判断是否在微信环境
			//console.log('开始判断是否在微信环境');
			this.isWechat = /MicroMessenger/i.test(navigator.userAgent);
			//console.log(`是否在微信环境: ${this.isWechat}`);
			//this.redirectToWechatAuth();

			// 从本地存储读取用户信息（仅作为基础信息展示用）
			//console.log('从本地存储读取用户信息');
			//this.userId = uni.getStorageSync('userId') || '';
			//this.userImage = uni.getStorageSync('userImage') || '';
			//this.userName = uni.getStorageSync('userName') || '';
			//console.log(`读取到的用户信息 - userId: ${this.userId}, userName: ${this.userName}`);

			// 检查URL中的code参数（授权回调回来的情况）
			//console.log('开始检查URL中的code参数');
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			const options = currentPage.options;
			//console.log(`当前页面参数: ${JSON.stringify(options)}`);

			// 情况1：有code参数（刚完成授权回调）
			if (options.code) {
				//console.log(`检测到code参数: ${options.code}，开始处理授权回调`);
				this.code = options.code;
				// 获取用户信息并更新本地存储
				this.getWechatUserInfo();
				// 处理完code后检查关注状态
				this.needPhoneInput = false;
				//this.checkFollowStatus();
				this.removeCodeFromUrl();
			}
			// 情况2：无code参数，但在微信环境（需要发起授权）
			else if (this.isWechat) {
				//console.log('无code参数，但在微信环境中');
				// 如果没有userId或者之前授权失败，才发起授权
				if (!this.userId || this.authFailed) {
					//console.log('没有userId或授权失败，准备发起微信授权');
					this.redirectToWechatAuth();
				} else {
					//console.log('已有有效userId，直接检查关注状态');
					// 已有有效userId，直接检查关注状态
					this.needPhoneInput = false;
					this.checkFollowStatus();
				}
			}
			// 情况3：非微信环境
			else {
				//console.log('非微信环境');
				// 非微信环境下，如果有userId则直接用，没有则需要输入手机号
				if (this.userId) {
					//console.log('非微信环境，已有userId，不需要输入手机号');
					this.needPhoneInput = false;
					//this.checkFollowStatus();
				} else {
					//console.log('非微信环境，无userId，需要输入手机号');
					this.needPhoneInput = true;
				}
			}
		},
		onUnload() {
			//console.log('进入onUnload生命周期函数，页面即将卸载');
			if (this.refreshInterval) {
				//console.log('清除refreshInterval定时器');
				clearInterval(this.refreshInterval);
			}
			if (this.checkFollowInterval) {
				//console.log('清除checkFollowInterval定时器');
				clearInterval(this.checkFollowInterval);
			}
		},
		methods: {
			testClick() {
				//console.log('testClick()被调用：按钮被点击了');
			},
			// 从URL参数获取店铺信息
			getShopInfoFromUrl() {
				//console.log('进入getShopInfoFromUrl()方法，获取店铺信息');
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				const options = currentPage.options;

				// 从URL参数中获取shopId和shopName
				this.shopId = options.shopId || "";
				this.shopName = options.shopName || "";

				//console.log(`获取到的店铺信息 - shopId: ${this.shopId}, shopName: ${this.shopName}`);

				// 验证店铺信息是否有效
				if (!this.shopId || !this.shopName) {
					//console.log('店铺信息无效：缺少shopId或shopName');
					this.isShopInfoValid = false;
					uni.showToast({
						title: '请重新扫码进入',
						icon: 'none',
						duration: 3000
					});
				} else {
					//console.log('店铺信息验证有效');
					this.isShopInfoValid = true;
				}
			},

			// 移除 URL 中的 code 参数
			removeCodeFromUrl() {
				//console.log('进入removeCodeFromUrl()方法，移除URL中的code参数');
				const url = window.location.href;
				const urlObj = new URL(url);
				urlObj.searchParams.delete('code');
				urlObj.searchParams.delete('state');
				const newUrl = urlObj.href;
				window.history.replaceState({}, document.title, newUrl);
				//console.log(`已移除code参数，新URL: ${newUrl}`);
			},

			// 跳转到微信授权页面
			redirectToWechatAuth() {
				//console.log('进入redirectToWechatAuth()方法，准备跳转到微信授权页面');
				const appId = this.appId;
				const currentUrl = encodeURIComponent(window.location.href);
				const authUrl =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${currentUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;

				//console.log(`准备跳转到微信授权页面，授权URL: ${authUrl}`);
				window.location.href = authUrl;
			},

			// 使用code获取用户信息和手机号
			getWechatUserInfo() {
				//console.log('进入getWechatUserInfo()方法，使用code获取用户信息');
				//console.log(`请求参数 code: ${this.code}`);

				uni.request({
					url: `http://ziyan.xshhotels.cn:8981/api/Queue/GetUser`,
					method: 'POST',
					data: {
						Id: this.code,
					},
					success: (res) => {
						//console.log('获取用户信息请求成功，开始处理响应');
						//console.log('响应数据:', res);
						uni.hideLoading();
						if (res.data) {
							//console.log('获取到用户信息，开始更新用户数据');
							// 自动填写手机号
							this.userId = res.data.userId;
							this.userImage = res.data.headImgUrl;
							this.userName = res.data.nickname;
							//console.log(`更新后的用户信息 - userId: ${this.userId}, userName: ${this.userName}`);

							//uni.setStorageSync('userId', res.data.userId);
							//uni.setStorageSync('userImage', res.data.headImgUrl);
							//uni.setStorageSync('userName', res.data.nickname);
							// 关闭手机号输入框
							this.needPhoneInput = false;
							//console.log('已关闭手机号输入框');

							// 检查关注状态
							//console.log('准备检查用户关注状态');
							this.checkFollowStatus();

							uni.showLoading({
								title: '正在查询...',
								mask: false
							});

							//console.log('开始查询用户排队记录');
							uni.request({
								url: `http://ziyan.xshhotels.cn:8981/api/Queue/PagingQueueByConsumer`,
								method: 'POST',
								data: {
									userId: res.data.userId
								},
								success: (res) => {
									//console.log('查询用户排队记录请求成功');
									uni.hideLoading();

									if (res.data && res.data.success) {
										//console.log('查询到有效排队记录，开始更新排队状态');
										const data = res.data.data;

										this.queueNumber = data.code;
										this.queueStatus = data.status;
										if (data.num === 0) {
											this.peopleAhead = 0;
										} else {
											this.peopleAhead = data.num || this.peopleAhead;
										}

										this.queueTime = data.time;
										this.queueId = data.id;
										this.hasTakenNumber = true;

										// console.log(
										// 	`更新后的排队信息 - queueNumber: ${this.queueNumber}, queueStatus: ${this.queueStatus}, peopleAhead: ${this.peopleAhead}`
										// );

										uni.vibrateShort();
										uni.showToast({
											title: '已获取您的号码',
											icon: 'none',
											duration: 1000
										});
										this.startAutoRefresh();

										if (this.queueStatus !== 0 && this.queueStatus !== 1 &&
											this.queueStatus !== 5) {
											//console.log('排队状态已结束，清除自动刷新定时器');
											if (this.refreshInterval) {
												clearInterval(this.refreshInterval);
												this.refreshInterval = null;
											}
										}

										if (this.queueStatus === 1) {
											//console.log('当前状态为叫号中，显示提示');
											uni.showToast({
												title: '正在叫您的号，请前往就餐',
												icon: 'none',
												duration: 3000
											});
										}
									} else {
										//console.log('未查询到有效排队记录或查询失败');
										this.resetQueueState();
										uni.showToast({
											title: '请取号',
											icon: 'none',
											duration: 2000
										});
									}
								},
								fail: (err) => {
									//console.error('查询用户排队记录请求失败:', err);
									uni.hideLoading();
									this.authFailed = true; // 标记授权失败
									this.needPhoneInput = true; // 允许手动输入手机号
									//console.log('授权失败，允许手动输入手机号');
								}
							});
						} else {
							//console.log('获取用户信息失败:', res.data?.msg);
						}
					},
					fail: (err) => {
						uni.hideLoading();
						//console.error('获取用户信息请求失败:', err);
					}
				});
			},

			// 检查用户是否关注公众号
			checkFollowStatus() {
				//console.log('进入checkFollowStatus()方法，检查用户是否关注公众号');
				//console.log(`当前userId: ${this.userId}, isWechat: ${this.isWechat}`);

				if (!this.userId || !this.isWechat) {
					//console.log('userId不存在或非微信环境，不检查关注状态');
					return;
				}

				uni.showLoading({
					title: '验证关注状态...'
				});

				// 调用后端接口检查关注状态
				//console.log('开始调用后端接口检查关注状态');
				uni.request({
					url: `http://ziyan.xshhotels.cn:8981/api/Queue/CheckFollowStatus`,
					method: 'POST',
					data: {
						Id: this.userId,
					},
					success: (res) => {
						//console.log('检查关注状态请求成功，处理响应');
						uni.hideLoading();

						if (res.data && res.data.success) {
							const subscribe = res.data.data.subscribe;
							//console.log(`用户关注状态: ${subscribe ? '已关注' : '未关注'}`);

							if (!subscribe) {
								// 未关注，显示引导弹窗
								//console.log('用户未关注公众号，显示关注引导弹窗');
								this.showFollowModal = true;
								this.startFollowCheckPolling();
							} else {
								// 已关注，继续原有流程
								//console.log('用户已关注公众号，隐藏关注引导弹窗');
								this.showFollowModal = false;
								this.clearFollowCheckPolling();
								this.refreshStatus();
							}
						} else {
							//console.error('检查关注状态失败:', res.data?.msg);
							uni.showToast({
								title: '验证失败，请稍后重试',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						//console.error('检查关注状态请求失败:', err);
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				});
			},

			// 启动轮询检查关注状态
			startFollowCheckPolling() {
				//console.log('进入startFollowCheckPolling()方法，启动关注状态轮询');

				if (this.checkFollowInterval) {
					//console.log('已存在checkFollowInterval，先清除');
					clearInterval(this.checkFollowInterval);
				}

				//console.log('设置每5秒检查一次关注状态');
				this.checkFollowInterval = setInterval(() => {
					//console.log('轮询检查关注状态');
					this.checkFollowStatus();
				}, 5000); // 每5秒检查一次
			},

			// 清除轮询
			clearFollowCheckPolling() {
				//console.log('进入clearFollowCheckPolling()方法，清除关注状态轮询');

				if (this.checkFollowInterval) {
					//console.log('清除checkFollowInterval定时器');
					clearInterval(this.checkFollowInterval);
					this.checkFollowInterval = null;
				}
			},

			selectTableType(type) {
				//console.log(`进入selectTableType()方法，选择桌型: ${type}`);
				this.selectedTableType = type;
			},

			selectPeople(num) {
				//console.log(`进入selectPeople()方法，选择用餐人数: ${num}`);
				this.selectedPeople = num;
			},

			formatTime(timeStr) {
				//console.log(`进入formatTime()方法，格式化时间: ${timeStr}`);

				if (!timeStr) {
					//console.log('时间字符串为空，返回空');
					return "";
				}

				const date = new Date(timeStr);
				const formattedTime =
					`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;

				//console.log(`格式化后的时间: ${formattedTime}`);
				return formattedTime;
			},

			takeNumber() {
				//console.log('进入takeNumber()方法，开始取号流程');

				// 取号前先检查是否关注
				if (this.showFollowModal) {
					//console.log('关注引导弹窗显示中，提示用户先关注公众号');
					uni.showToast({
						title: '请先关注公众号',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '正在取号...'
				});

				// 准备请求数据
				const requestData = {
					shopId: this.shopId,
					consumerNum: typeof this.selectedPeople === 'number' ? this.selectedPeople : 7,
					phone: this.phoneNumber,
					userId: this.userId,
					userName: this.userName,
				};
				//console.log("取号请求数据:", requestData);

				uni.request({
					url: 'http://ziyan.xshhotels.cn:8981/api/Queue/AddQueue',
					method: 'POST',
					data: requestData,
					success: (res) => {
						//console.log('取号请求成功，处理响应');
						uni.hideLoading();

						if (res.data && res.data.success) {
							//console.log('取号成功，更新排队信息');
							const data = res.data.data;

							this.queueId = data.id;
							this.queueNumber = data.code;
							this.queueStatus = data.status;
							this.queueTime = data.createdOn;
							this.hasTakenNumber = true;

							// console.log(
							// 	`取号成功 - queueId: ${this.queueId}, queueNumber: ${this.queueNumber}, queueStatus: ${this.queueStatus}`
							// );

							this.startAutoRefresh();
							this.refreshStatus();

							uni.showToast({
								title: '取号成功',
								icon: 'success',
								duration: 2000
							});
						} else {
							//console.log(`取号失败: ${res.data?.data || '未知错误'}`);
							uni.showToast({
								title: res.data?.data || '取号失败',
								icon: 'none',
								duration: 2000
							});
							if (res.data?.data === "重复取号") {
								//console.log('检测到重复取号，显示已有号码');
								this.hasTakenNumber = true;
								this.refreshStatus();
							}
						}
					},
					fail: () => {
						uni.hideLoading();
						//console.error('取号请求失败');
						uni.showToast({
							title: '网络错误2，请重试',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			cancelQueue() {
				//console.log('进入cancelQueue()方法，准备取消排队');

				uni.showModal({
					title: '确认取消',
					content: '确定要取消排队吗？',
					success: (res) => {
						if (res.confirm) {
							//console.log('用户确认取消排队');
							uni.showLoading({
								title: '正在取消...'
							});

							uni.request({
								url: `http://ziyan.xshhotels.cn:8981/api/Queue/DeleteQueue?id=${this.queueId}&status=2`,
								method: 'GET',
								success: (res) => {
									//console.log('取消排队请求成功，处理响应');
									uni.hideLoading();

									if (res.data && res.data.success) {
										//console.log('取消排队成功，重置排队状态');
										// 取消成功，返回取号界面
										this.resetQueueState();

										uni.showToast({
											title: '已取消排队',
											icon: 'none',
											duration: 2000
										});
									} else {
										//console.log(`取消排队失败: ${res.data?.msg || '未知错误'}`);
										uni.showToast({
											title: res.data?.msg || '取消失败',
											icon: 'none',
											duration: 2000
										});
									}
								},
								fail: () => {
									uni.hideLoading();
									//console.error('取消排队请求失败');
									uni.showToast({
										title: '网络错误3，请重试',
										icon: 'none',
										duration: 2000
									});
								}
							});
						} else {
							//console.log('用户取消了取消排队操作');
						}
					}
				});
			},

			// 重置排队状态，返回取号界面
			resetQueueState() {
				//console.log('进入resetQueueState()方法，重置排队状态');

				this.hasTakenNumber = false;
				this.queueId = null;
				this.queueNumber = null;
				this.queueStatus = 0;
				this.peopleAhead = 0;
				this.queueTime = null;

				//console.log('排队状态已重置');

				// 清除定时器
				if (this.refreshInterval) {
					//console.log('清除refreshInterval定时器');
					clearInterval(this.refreshInterval);
					this.refreshInterval = null;
				}
			},

			refreshStatus() {
				//console.log('进入refreshStatus()方法，刷新排队状态');

				uni.showLoading({
					title: '正在刷新...',
					mask: false
				});

				uni.request({
					url: `http://ziyan.xshhotels.cn:8981/api/Queue/PagingQueueByConsumer?phone=${this.phoneNumber}&userId=${this.userId}`,
					method: 'POST',
					data: {
						phone: this.phoneNumber,
						userId: this.userId
					},
					success: (res) => {
						//console.log('刷新排队状态请求成功，处理响应');
						uni.hideLoading();

						if (res.data && res.data.success) {
							//console.log('刷新成功，更新排队信息');
							const data = res.data.data;

							this.queueNumber = data.code;
							this.queueStatus = data.status;
							if (data.num === 0) {
								this.peopleAhead = 0;
							} else {
								this.peopleAhead = data.num || this.peopleAhead;
							}
							this.queueTime = data.time;
							this.queueId = data.id;

							// console.log(
							// 	`刷新后的排队信息 - queueNumber: ${this.queueNumber}, queueStatus: ${this.queueStatus}, peopleAhead: ${this.peopleAhead}`
							// );

							uni.vibrateShort();
							uni.showToast({
								title: '已刷新',
								icon: 'none',
								duration: 1000
							});

							this.hasTakenNumber = true;

							if (this.queueStatus !== 0 && this.queueStatus !== 1 && this.queueStatus !== 5) {
								//console.log('排队状态已结束，清除自动刷新定时器');
								if (this.refreshInterval) {
									clearInterval(this.refreshInterval);
									this.refreshInterval = null;
								}
							}

							if (this.queueStatus === 1) {
								//console.log('当前状态为叫号中，显示提示');
								uni.showToast({
									title: '正在叫您的号，请前往就餐',
									icon: 'none',
									duration: 3000
								});
							}
						} else {
							//console.log(`刷新失败: ${res.data?.msg || '未知错误'}`);
							uni.showToast({
								title: res.data?.msg || '刷新失败',
								icon: 'none',
								duration: 2000
							});
							this.resetQueueState();

							// uni.showToast({
							// 	title: '请重新取号',
							// 	icon: 'none',
							// 	duration: 2000
							// });
						}
					},
					fail: () => {
						uni.hideLoading();
						//console.error('刷新排队状态请求失败');
						uni.showToast({
							title: '网络错误4，请重试',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			startAutoRefresh() {
				//console.log('进入startAutoRefresh()方法，启动自动刷新');

				if (this.refreshInterval) {
					//console.log('已存在refreshInterval，先清除');
					clearInterval(this.refreshInterval);
				}

				// 每30秒自动刷新一次
				//console.log('设置每30秒自动刷新一次排队状态');
				this.refreshInterval = setInterval(() => {
					//console.log('自动刷新排队状态');
					this.refreshStatus();
				}, 30000);
			}
		}
	};
</script>

<style scoped>
.container {
  background-color: #f5f9f6;
  min-height: 100vh;
}

/* 顶部导航栏 */
.navbar {
  background-color: #069c29;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-title {
  color: white;
  font-size: 18px;
  font-weight: bold;
}

/* 关注公众号弹窗 */
.follow-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-content {
  background-color: white;
  width: 80%;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.modal-title {
  color: #069c29;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.modal-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
  display: block;
}

.qrcode-img {
  width: 200px;
  height: 200px;
  margin: 0 auto 10px;
  display: block;
}

.qrcode-tip {
  font-size: 12px;
  color: #999;
  margin-bottom: 20px;
  display: block;
}

.confirm-btn {
  background-color: #069c29;
  color: white;
  border: none;
  width: 100%;
  height: 40px;
  border-radius: 20px;
  font-size: 16px;
}

/* 取号界面 */
.take-number {
  padding: 20px 15px;
}

.shop-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(6, 156, 41, 0.1);
}

.shop-logo {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  margin-right: 15px;
}

.shop-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.shop-desc {
  font-size: 14px;
  color: #666;
}

.people-selector {
  background-color: white;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(6, 156, 41, 0.1);
}

.selector-title {
  font-size: 16px;
  color: #333;
  display: block;
  margin-bottom: 15px;
}

.people-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.people-btn {
  width: 60px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border: 1px solid #069c29;
  color: #069c29;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}

.people-btn-active {
  background-color: #069c29;
  color: white;
}

.more-btn {
  width: 100px !important;
}

.phone-input {
  margin-bottom: 20px;
}

.phone-input-field {
  width: 100%;
  height: 44px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0 15px;
  font-size: 16px;
}

.take-number-btn {
  width: 100%;
  height: 48px;
  background-color: #069c29;
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 18px;
  font-weight: bold;
}

.take-number-btn:disabled {
  background-color: #a5d9b3;
  opacity: 0.7;
}

/* 排队状态界面 */
.queue-status {
  padding: 20px 15px;
}

.status-header {
  text-align: center;
  margin-bottom: 20px;
}

.status-text {
  color: #069c29;
  font-size: 20px;
  font-weight: bold;
  margin-right: 10px;
}

.status-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.queue-details {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(6, 156, 41, 0.1);
}

.queue-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.queue-item:last-child {
  border-bottom: none;
}

.queue-label {
  color: #666;
  font-size: 16px;
}

.queue-value {
  color: #333;
  font-size: 16px;
  font-weight: bold;
}

.shop-name-large {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.action-btn {
  flex: 1;
  height: 44px;
  border-radius: 22px;
  font-size: 16px;
}

.cancel-btn {
  color: #069c29;
  border: 1px solid #069c29;
  background-color: white;
}

.refresh-btn {
  background-color: #069c29;
  color: white;
  border: none;
}

.cancel-btn:disabled,
.refresh-btn:disabled {
  opacity: 0.5;
}

.queue-tips {
  background-color: #f0f9f2;
  color: #069c29;
  padding: 12px 15px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  margin-bottom: 20px;
}

.queue-result {
  text-align: center;
  padding: 20px 0;
}

.result-text {
  color: #f53f3f;
  font-size: 18px;
  font-weight: bold;
}

/* 底部信息 */
.footer {
  text-align: center;
  padding: 15px;
  color: #999;
  font-size: 14px;
}
</style>